<template>
	<div>
		<HomeHeader></HomeHeader>
		<HomeLeft :cur="8"></HomeLeft>
		<div id="main">
			<div id="web_con">
				<div class="web_wp">
					<div class="web_location">
						<div class="here_area">
							<strong>当前位置：</strong>项目经理管理&nbsp;&nbsp;»&nbsp;&nbsp;商户管理预计收益明细
						</div>
						<div class="here_btn">
							<a href="javascript:history.back()" class="web_btn btn_add"><em
									class="iconfont icon-shdcfanhui"></em>返回</a>
						</div>
					</div>
					<div class="filter clearfix">
						<div class="aa">
							<div class="item">
								<span>年份：</span>
								<el-date-picker v-model="year" type="year" placeholder="开始时间" value-format="yyyy"
									:clearable="false" :picker-options="pickerOptions">
								</el-date-picker>
							</div>

							<div class="item">
								<button class="but_search" @click="Seach()">搜 索</button>
							</div>
							<div class="item">
								项目经理姓名：<b style="font-size: 16px;color: #1772f6;">{{name}}</b>
							</div>
							<div class="item">
								商户管理预计收益：<b style="font-size: 16px;color: #1772f6;">{{sum}}</b>
							</div>
						</div>
						<div class="bb">
							<a href="javascript:;" class="web_btn btn_refresh" @click="ExportList()"><em
									class="iconfont icon-shdcexcel"></em>导出</a>
							<a href="javascript:;" class="web_btn btn_refresh" @click="Refresh()"><em
									class="iconfont icon-shdcshuaxin"></em>刷新</a>
						</div>
					</div>

					<div class="web_table">
						<table>
							<tr>
								<!-- <th class="tac" style="width: 60px;">选择</th> -->
								<th class="tac">交易编号</th>
								<th class="tac">商户名称</th>
								<th class="tac">存入金额</th>
								<th class="tac">生效日期</th>
								<th class="tac">到期日期</th>
								<th class="tac">获得收益</th>
							</tr>
							<tr v-for="(item,i) in listinfo" :key="i">
								<td class="tac">{{item.payno}}</td>
								<td class="tac">{{item.merchant.name}}</td>
								<td class="tac">{{item.pay_fee}}</td>
								<td class="tac">{{item.start_at}}</td>
								<td class="tac">{{item.end_at}}</td>
								<td class="tac">{{item.predictFee}}</td>
							</tr>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import HomeHeader from '../components/Header.vue'
	import HomeLeft from '../components/Left.vue'
	export default {
		components: {
			HomeHeader,
			HomeLeft,

		},
		data() {
			return {
				page: 1,
				listinfo: [],
				id: 0,
				year: '',
				sum: 0,
				pickerOptions: {
					disabledDate(time) {
						return time.getFullYear() < new Date().getFullYear();
					},
				},
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.name = e.name;
			this.year = e.year;
			this.GetList();
		},
		methods: {

			//导出
			ExportList: function() {
				let that = this;
				var _url = 'http://bylm.zxinvest.cn/api/admin/manager/' + that.id + '/predict?export=predict&year=' + that.year + '&token=' + that.common.GetStorage('bytoken');				
				console.log(_url)
				// 创建一个隐藏的<iframe>元素
				const iframe = document.createElement('iframe');
				iframe.style.display = 'none';
				// 设置<iframe>的src为接口地址
				iframe.src = _url;
				// 将<iframe>添加到文档中
				document.body.appendChild(iframe);
			},


			Refresh: function() {
				this.keywords = '';
				this.Seach();
			},
			Seach: function() {
				this.page = 1;
				this.GetList();
			},
			GetList: function(id, merchantno) {
				let that = this;
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				let _data = {
					year: that.year
				};
				that.common.http('GET', 'manager/' + that.id + '/predict', _data, function(res) {
					uni.hideLoading();
					that.listinfo = res.data;
					that.sum = res.data.reduce((acc, obj) => acc + obj.predictFee * 1, 0);
					// that.sum2 = res.data.reduce((acc, obj) => acc + obj.expiredFee*1, 0);
				});
			},
			LookTest: function(id) {
				uni.navigateTo({
					url: '/pages/member/info?id=' + id
				})
			},
		}
	}
</script>

<style>


</style>